<template>
  <view class="home-skeleton">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="fui-rect status-bar"></view>
      <view class="nav-content">
        <view class="fui-rect nav-title"></view>
      </view>
    </view>

    <!-- 轮播图 -->
    <view class="banner fui-rect"></view>

    <!-- 菜单 -->
    <view class="menu-grid">
      <view class="menu-item" v-for="item in 10" :key="item">
        <view class="fui-round icon"></view>
        <view class="fui-rect text"></view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-list">
      <view class="content-item" v-for="item in 4" :key="item">
        <view class="fui-rect image"></view>
        <view class="text-group">
          <view class="fui-rect title"></view>
          <view class="fui-rect title"></view>

          <view class="fui-rect line"></view>
        </view>
      </view>
    </view>
  </view>
  <fui-skeleton outerClass="home-skeleton"></fui-skeleton>

  <!-- 实际内容区域 -->
  <!-- <view class="home-content" v-else>
    <view class="welcome-section">
      <text class="welcome-text"
        >欢迎回来，{{ userInfo.wx_user || "用户" }}</text
      >
    </view>

    <view class="data-transfer-demo">
      <view class="demo-title">页面数据传输示例</view>
      
      <view class="demo-form">
        <view class="form-item">
          <text class="form-label">数据键名：</text>
          <input class="form-input" v-model="dataKey" placeholder="请输入数据键名" />
        </view>
        
        <view class="form-item">
          <text class="form-label">数据内容：</text>
          <input class="form-input" v-model="dataValue" placeholder="请输入数据内容" />
        </view>
        
        <view class="form-item">
          <text class="form-label">数据类型：</text>
          <picker class="form-picker" :range="dataTypes" @change="onDataTypeChange">
            <view class="picker-value">{{ dataTypes[dataTypeIndex] }}</view>
          </picker>
        </view>
        
        <view class="button-group">
          <button class="btn btn-save" @tap="saveData">保存数据</button>
          <button class="btn btn-get" @tap="getData">获取数据</button>
          <button class="btn btn-clear" @tap="clearData">清除数据</button>
        </view>
      </view>
      
      <view class="result-section" v-if="result">
        <view class="result-title">操作结果：</view>
        <view class="result-content">{{ result }}</view>
      </view>
    </view>
  </view> -->
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import sheep from "@/sheep";
import { onLoad, onShow } from "@dcloudio/uni-app";

onShow(() => {
  console.log("首页加载完成，开始检查登录状态");
  // 微信登录验证
  uni.login({
    provider: "weixin",
    success: (res) => {
      console.log("微信登录成功，获取code:", res.code);
      const params = {
        clientId: import.meta.env.SHOPRO_APPID,
        grantType: "xcx",
        xcxCode: res.code,
      };
      sheep.$api.sail_auth.login(params).then((res) => {
        console.log("系统登录成功:", res);
        sheep.$store("user").isLogin = true;
        uni.setStorageSync("token","Bearer "+ res.data.access_token);
        sheep.$store("user").setToken("Bearer "+ res.data.access_token);
        sheep.$api.sail_auth.getUserInfo().then((res) => {
          console.log("获取用户信息成功:", res.data);
          sheep.$store("user").userInfo = res.data.user;
          sheep.$store("user").userInfo.permissions = res.data.permissions;
          sheep.$store("user").userInfo.roles = res.data.roles;
        });
      });
    },
    fail: (err) => {
      console.error("微信登录失败:", err);

      // 使用持久化存储保存重定向路径
      sheep.$helper.pageTransfer.setData("redirect", "/pages/index/index");

      sheep.$helper.toast("微信登录失败，请检查网络");
    },
  });
});
</script>

<style lang="scss" scoped>
.home-skeleton {
  box-sizing: border-box;
  min-height: 100vh;
  position: relative;
  padding-bottom: 100rpx; /* 为底部tabbar留出空间 */

  .nav-bar {
    .status-bar {
      height: var(--status-bar-height);
      width: 100%;
      margin-bottom: 20rpx;
    }
  }

  .banner {
    width: 100%;
    height: 300rpx;
    margin-top: 20rpx;
    border-radius: 16rpx;
  }

  .menu-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40rpx;

    .menu-item {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30rpx;

      .icon {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
      }

      .text {
        width: 100rpx;
        height: 24rpx;
        margin-top: 16rpx;
      }
    }
  }

  .content-list {
    margin-top: 40rpx;

    .content-item {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      .image {
        width: 200rpx;
        height: 160rpx;
        border-radius: 16rpx;
        margin-right: 20rpx;
      }

      .text-group {
        flex: 1;
        .title {
          width: 80%;
          height: 32rpx;
          margin-bottom: 20rpx;
        }
        .line {
          width: 100%;
          height: 24rpx;
        }
      }
    }
  }

  /* 底部 Tabbar 样式 */
  .tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 100;

    .tabbar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;

      .tabbar-icon {
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 6rpx;
      }

      .tabbar-text {
        width: 80rpx;
        height: 20rpx;
      }
    }
  }
}

.home-content {
  padding: 30rpx;
  min-height: 100vh;

  .welcome-section {
    margin-bottom: 40rpx;

    .welcome-text {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .data-transfer-demo {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

    .demo-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 30rpx;
      text-align: center;
    }

    .demo-form {
      .form-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .form-label {
          width: 160rpx;
          font-size: 28rpx;
          color: #666;
        }

        .form-input,
        .form-picker {
          flex: 1;
          height: 80rpx;
          border: 1px solid #eee;
          border-radius: 8rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
          display: flex;
          align-items: center;
        }

        .picker-value {
          color: #333;
        }
      }

      .button-group {
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;

        .btn {
          flex: 1;
          height: 80rpx;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          color: #fff;
          margin: 0 10rpx;

          &:first-child {
            margin-left: 0;
          }

          &:last-child {
            margin-right: 0;
          }

          &.btn-save {
            background-color: #3366ff;
          }

          &.btn-get {
            background-color: #22c55e;
          }

          &.btn-clear {
            background-color: #f43f5e;
          }
        }
      }
    }

    .result-section {
      margin-top: 30rpx;
      padding-top: 20rpx;
      border-top: 1px solid #eee;

      .result-title {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 10rpx;
      }

      .result-content {
        font-size: 28rpx;
        color: #333;
        background-color: #f5f5f5;
        padding: 20rpx;
        border-radius: 8rpx;
        word-break: break-all;
      }
    }
  }
}
</style>
